<template>
  <div class="header">
    <div class="header-body">
      <FloatWindow :itemData="itemObj" @changevalFun="changevalFun" />
      <el-col :span="4">
        齐飞科技
        <Logo class="logo" />
      </el-col>
      <el-col :span="20">
        <el-menu
          :default-active="path"
          mode="horizontal"
          active-text-color="#D90002"
          text-color="#222222"
          menu-trigger="hover"
        >
          <template v-for="t in menulist">
            <el-menu-item
              :key="t.url"
              :index="t.url"
              @click="open(t)"
              @mouseenter.native="enterOpen(t.lebal)"
              @mouseleave.native="leaveClose(t.lebal)"
            >{{ t.lebal }}</el-menu-item>
          </template>
        </el-menu>
      </el-col>
    </div>
  </div>
</template>

<script scoped>
export default {
  data() {
    return {
      activeIndex: "1",

      itemObj: {
        isShowBox: false,
        itemDatas: "",
      },
      menulist: [
        {
          lebal: "首页",
          url: "/",
        },
        {
          lebal: "关于我们",
          url: "/about",
        },
        {
          lebal: "核心能力",
          url: "/main",
        },
        {
          lebal: "同业金融科技服务",
          url: "/server",
        },
        {
          lebal: "数字化解决方案",
          url: "/project",
        },
        {
          lebal: "金融生态平台服务",
          url: "/platformServer",
        },
        {
          lebal: "新闻动态",
          url: "/news",
        },
        {
          lebal: "加入我们",
          url: "/jionUs",
        },
      ],
    };
  },
  computed: {
    path() {
      return this.$route.path;
    },
  },
  methods: {
    open(t) {
      this.$router.push(t.url);
    },
    enterOpen(n) {
      if (n == "首页" || n == "加入我们") {
        this.itemObj.isShowBox = false;
        return;
      }
      this.itemObj.itemDatas = n;
      this.itemObj.isShowBox = true;
    },
    leaveClose(n) {
      this.itemObj.isShowBox = false;
    },
    changevalFun(val) {
      this.itemObj.isShowBox = val;
    },
  },
};
</script>

<style>
.header {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.header-body {
  width: 1200px;
  margin: 0 auto;
  position: relative;
}
.logo {
  width: 50px;
  height: 50px;
}
.el-menu-item:hover {
  color: red !important;
}
</style>
